<template>

  <div class="head-nav">
    <div @click="goPage('/')"><i class="el-icon-arrow-left"></i></div>
    <div>
      {{shopName}}
    </div>
    <div class="head-right">
      <!--<div class="search" @click="goPage('Search')"><i class="el-icon-search"></i></div>-->
      <div @click="goPage('Mine')" class="mine"><i class="iconfont icon_mine"></i></div>
    </div>
  </div>

</template>
<script>

  export default {
    name: 'HeadNav',
    props: {},
    components: { // 注册子组件
    },
    data() {
      return {
        detailShow: false,
        shopName: ''
      };
    },
    created() {
      this.shopName = this.$store.state.shop.name;
    },
    methods: {
      showDetail() {
        this.detailShow = true;
      },
      closeDetail() {
        this.detailShow = false;
      },
      goPage(path) {
        this.$router.push(path);
      }
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .head-nav
    display: flex
    justify-content: space-between
    padding :0 10px
    align-items: center
    background #ffffff
    height 40px
    color: black
    flex:1

  .store-sele
    input
      border: none
      width: 100px

  .head-right
    display: flex
    justify-content: space-around
    align-items center
    height 100%
    width 60px
  .mine i
    font-size :24px
</style>
